<template>
  <el-dialog
    title="【人员基础信息】 -> 批量编辑"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :before-close="handleOffDialog"
    width="30%"
  >
    <el-select v-model="selectItem" size="mini" placeholder="请选择" style="width: 100%;margin-bottom: 20px;" @change="selectChange">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.fieldName"
        :value="item.fieldCode"
      >
      </el-option>
    </el-select>

    <el-input
      v-if="selectType === 'input'"
      type="textarea"
      :rows="4"
      size="mini"
      v-model="fillData"
    />

    <el-input
      v-if="selectType === 'number'"
      type="input"
      v-model.number="fillData"
      size="mini"
      @input="judgmentNumber"
    />

    <el-date-picker
      v-if="selectType === 'date'"
      v-model="fillData"
      size="mini"
      type="date"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd"
    />

    <el-cascader
      v-if="selectType === 'tree' || selectType === 'radio'"
      style="width: 100%;"
      class="my-cascader"
      v-model="fillData"
      size="mini"
      :options="cascaderOptions"
      :props="{
        value: 'uuid',
		    label: 'name'
      }"
    />

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleOffDialog">关闭</el-button>
      <el-button type="primary" size="mini" @click="handleEditDialog">修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import {batchProcess as BatchProcess, opDictNew, queryCondition} from "@/api/apiUrl";

export default {
  name: 'EditMaster',
  data() {
    return {
      dialogVisible: false,
      options: [],
      cascaderOptions: [],
      selectItem: undefined, // 下拉选中数据
      selectType: undefined, // 选中的状态
      fillData: undefined, // 填写数据
      uuids: [] // 选中人员数据
    }
  },
  methods: {
    /**
     * @Date: 2021/6/18
     * @param: uuids 选中的或全部数据的 uuid
     * @param: subUuid 子集uuid
     */
    handleOpenDialog(uuids, subUuid = '暂无子集') {
      console.log('打开')
      this.uuids = uuids
      this.getConditionsList()
      this.dialogVisible = true
    },
    handleOffDialog() {
      this.dialogVisible = false
      this.selectItem = undefined
      this.selectType = undefined
      this.fillData = undefined
      this.$emit('handleOffDialog')
    },
    judgmentNumber() {
      if(typeof this.fillData !== 'number') { this.fillData = '' }
    },
    async handleEditDialog() {
      const { selectItem, fillData } = this
      if (!selectItem) {
        return this.$message.warning('请先选择选项')
      }
      const result = await postAction(BatchProcess.updateStaff, {
        field: selectItem,
        uuids: this.uuids,
        value: typeof this.fillData === 'number'? String(fillData) :
            typeof this.fillData === 'object' ? fillData.join(',') :fillData
      })
      if (result.code === 200) this.$message.success('修改成功。')
      this.$emit('handleModifyDialog')
    },
    selectChange(fieldCode) {
      this.fillData = undefined
      this.cascaderOptions = []
      const selectedItem = this.options.find(i => i.fieldCode === fieldCode)
      this.selectType = selectedItem.type
      if (selectedItem.dict) {
        this.getFindByType(selectedItem)
      }
    },
    /* 获取 */
    async getConditionsList() {
      const result = await getAction(queryCondition.conditionsList)
      const filter_item = result.data.find(res => res.type === "BASE_STAFF")
      this.options = filter_item.list
    },
    async getFindByType({ dict }) {
      const { selectType } = this
      const result = await getAction(selectType === 'tree' ? opDictNew.findTreeByType : opDictNew.findByType, { type: dict })
      this.cascaderOptions = result.data
    }
  }
}
</script>

<style scoped>
  /*/deep/ .el-cascader .el-input .el-input__inner {*/
  /*  height: 40px !important;*/
  /*  line-height: 40px !important;*/
  /*}*/

  /deep/ .el-dialog__body {
    height: 400px !important;
    overflow-y: auto;
  }
</style>
<style>
  button:focus {
    outline: none !important;
  }
</style>
